<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui">

    <h:panelGrid columns="2" style="width: 100%">

        <p:outputLabel for="idOptotipo" value="#{msg.optotipo}"/>
        <p:outputLabel for="distanciaVL" value="Distancia Visión Lejana"/>

        <p:selectOneMenu id="idOptotipo"
                         value="#{administrarControlAction.agudezaVisual.TTipOptotipo}"
                         converter="conversorEntidad" style="width: 50%">
            <f:selectItem itemLabel="#{msg.seleccione}" itemValue=""/>
            <f:selectItems
                value="#{administrarControlAction.listaOptotiposVL}"
                var="tOptotipo" itemLabel="#{tOptotipo.desTipOptotipo}"
                itemValue="#{tOptotipo}" />
        </p:selectOneMenu>

        <p:autoComplete id="distanciaVL" dropdown="true" value="#{administrarControlAction.agudezaVisual.distanciaVl}"   
                        completeMethod="#{administrarControlAction.autoCompleteDistMetrosAgudezaVisual}" maxResults="10" style="width: 100%" />

    </h:panelGrid>

    <p:panelGrid style="width: 100%">
        <f:facet name="header">
            <p:row>
                <p:column colspan="2">#{msg.agudezaVisual}</p:column>
                <p:column>VL</p:column>
                <p:column>PH</p:column>
            </p:row>
        </f:facet>

        <p:row>
            <p:column styleClass="ui-widget-header" rowspan="3">SC</p:column>
            <p:column styleClass="ui-widget-header">OD</p:column>
            <p:column><p:inputText value="#{administrarControlAction.agudezaVisual.numScOdVl}"/> </p:column>
            <p:column><p:inputText value="#{administrarControlAction.agudezaVisual.numScOdPh}"/></p:column>
        </p:row>

        <p:row>
            <p:column styleClass="ui-widget-header">OI</p:column>
            <p:column><p:inputText value="#{administrarControlAction.agudezaVisual.numScOiVl}"/> </p:column>
            <p:column><p:inputText value="#{administrarControlAction.agudezaVisual.numScOiPh}"/></p:column>
        </p:row>

        <p:row>
            <p:column styleClass="ui-widget-header">AO</p:column>
            <p:column><p:inputText value="#{administrarControlAction.agudezaVisual.numScAoVl}"/> </p:column>
        </p:row>

        <p:row>
            <p:column styleClass="ui-widget-header" rowspan="3">CC</p:column>
            <p:column styleClass="ui-widget-header">OD</p:column>
            <p:column><p:inputText value="#{administrarControlAction.agudezaVisual.numCcOdVl}"/> </p:column>
        </p:row>

        <p:row>
            <p:column styleClass="ui-widget-header">OI</p:column>
            <p:column><p:inputText value="#{administrarControlAction.agudezaVisual.numCcOiVl}"/> </p:column>
        </p:row>

        <p:row>
            <p:column styleClass="ui-widget-header">AO</p:column>
            <p:column><p:inputText value="#{administrarControlAction.agudezaVisual.numCcAoVl}"/> </p:column>    
        </p:row>
    </p:panelGrid>

    <p:spacer/>
    <h:panelGrid columns="2" style="width: 100%">

        <ui:define name="label">#{msg.optotipo}:</ui:define>
        <p:selectOneMenu id="idTipoOptotipo"
                         value="#{administrarControlAction.agudezaVisual.TTipoOptotipoVp}"
                         converter="conversorEntidad" style="width: 50%">
            <f:selectItem itemLabel="#{msg.seleccione}" itemValue="" />
            <f:selectItems
                value="#{administrarControlAction.listaOptotiposVP}"
                var="tOptotipoVp" itemLabel="#{tOptotipoVp.desTipOptotipo}"
                itemValue="#{tOptotipoVp}" />
        </p:selectOneMenu>


        <ui:define name="label">#{msg.distancia}:</ui:define>
        <p:autoComplete dropdown="true" value="#{administrarControlAction.agudezaVisual.distanciaVp}"   
                        completeMethod="#{administrarControlAction.autoCompleteDistCentimetrosMetrosAgudezaVisual}" maxResults="10" style="width: 100%" />

    </h:panelGrid>

    <p:panelGrid style="width: 100%">
        <f:facet name="header">
            <p:row>
                <p:column colspan="2">#{msg.agudezaVisual}</p:column>
                <p:column>VP</p:column>
            </p:row>
        </f:facet>

        <p:row>
            <p:column styleClass="ui-widget-header" rowspan="3">SC</p:column>
            <p:column styleClass="ui-widget-header">OD</p:column>
            <p:column><p:inputText value="#{administrarControlAction.agudezaVisual.numScOdVp}"/> </p:column>
        </p:row>

        <p:row>
            <p:column styleClass="ui-widget-header">OI</p:column>
            <p:column><p:inputText value="#{administrarControlAction.agudezaVisual.numScOiVp}"/> </p:column>
        </p:row>

        <p:row>
            <p:column styleClass="ui-widget-header">AO</p:column>
            <p:column><p:inputText value="#{administrarControlAction.agudezaVisual.numScAoVp}"/> </p:column>
        </p:row>

        <p:row>
            <p:column styleClass="ui-widget-header" rowspan="3">CC</p:column>
            <p:column styleClass="ui-widget-header">OD</p:column>
            <p:column><p:inputText value="#{administrarControlAction.agudezaVisual.numCcOdVp}"/> </p:column>
        </p:row>

        <p:row>
            <p:column styleClass="ui-widget-header">OI</p:column>
            <p:column><p:inputText value="#{administrarControlAction.agudezaVisual.numCcOiVp}"/> </p:column>
        </p:row>

        <p:row>
            <p:column styleClass="ui-widget-header">AO</p:column>
            <p:column><p:inputText value="#{administrarControlAction.agudezaVisual.numCcAoVp}"/> </p:column>
        </p:row>
    </p:panelGrid>


    <p:commandButton id="guardar" value="#{msg.guardar}" action="#{administrarControlAction.crearAgudezaVisual()}" />

</ui:composition>